<!--
 * @Author: wupeiwen <javapeiwen2010@gmail.com>
 * @Date: 2022-05-26 13:26:44
 * @LastEditors: wupeiwen <javapeiwen2010@gmail.com>
 * @LastEditTime: 2023-06-29 14:46:35
 * @FilePath: /tea-garden-web/src/components/component-line-chart.vue
 * @Description: 气象灾害折线图
-->
<template>
  <div id="line-chart">
  </div>
</template>

<script>
import { Chart } from '@antv/g2'

export default {
  data () {
    return {
      chart: null,
      additionalData: [
        { name: '12.12 04时', type: 'wran', value: 11 },
        { name: '12.12 05时', type: 'wran', value: 12 },
        { name: '12.12 06时', type: 'wran', value: 13 },
        { name: '12.12 07时', type: 'wran', value: 14 },
        { name: '12.12 08时', type: 'wran', value: 15 },
        { name: '12.12 09时', type: 'wran', value: 16 },
        { name: '12.12 10时', type: 'wran', value: 11 },
        { name: '12.12 11时', type: 'wran', value: 18 },
        { name: '12.12 12时', type: 'wran', value: 19 },
        { name: '12.12 11时', type: 'wran', value: 11 },
        { name: '12.12 15时', type: 'wran', value: 11 },
        { name: '12.12 16时', type: 'wran', value: 12 },
        { name: '12.12 17时', type: 'wran', value: 13 },
        { name: '12.12 18时', type: 'wran', value: 14 },
        { name: '12.12 19时', type: 'wran', value: 15 },
        { name: '12.12 20时', type: 'wran', value: 16 },
        { name: '12.12 21时', type: 'wran', value: 17 },
        { name: '12.12 22时', type: 'wran', value: 18 },
        { name: '12.12 23时', type: 'wran', value: 19 },
        { name: '12.12 24时', type: 'wran', value: 20 }
      ]
    }
  },
  props: {
    data: {
      type: Array,
      default: function () {
        return []
      }
    },
    valueRange: {
      type: Object,
      default: function () {
        return {
          min: 0,
          max: 100
        }
      }
    }
  },
  watch: {
    data () {
      if (this.chart) {
        this.chart.changeData(this.data)
      }
    }
  },
  methods: {

    initChart () {
      this.chart = new Chart({
        container: 'line-chart',
        autoFit: true,
        height: 225
      })
      const { min, max } = this.valueRange
      this.chart.scale({
        value: { min, max, alias: '指数' },
        name: { sync: true, nice: true }
      })
      this.chart.tooltip({
        showCrosshairs: true,
        shared: true,
        itemTpl: `
    <div style="margin-bottom: 10px;list-style:none;">
    <span style="background-color:{color};" class="g2-tooltip-marker"></span>
    {name}: {value}
    </div>
    ` // add
      })

      // this.chart.data(this.additionalData)
      // this.chart.line().position('name*value').color('#0dbc79').size(1)
      const newData = this.data.map(item => {
        return { ...item, type: '温度' }
      })
      const res = this.data.map(item => {
        item.value = 4
        return { ...item, type: '警戒线' }
      })
      const NewRes = [...newData, ...res]
      // console.log(newData, '我是newData')
      // console.log(res, '我是res')
      console.log(NewRes)

      this.chart.data(NewRes)

      this.chart
        .line()
        .position('name*value')
        .color('type', ['#089BAB', 'red'])
        .shape('circle')
        .tooltip('name*value*type', function (name, value, type) {
          if (type === '温度') {
            return {
              name: '温度',
              value: value + '°C'
            }
          } else {
            return {
              name: '警戒温度',
              value: value + '°C'
            }
          }
        }) // add
      this.chart.render()
    }
  },
  mounted () {
    this.initChart()
  },
  beforeUnmount () {
    if (this.chart) {
      this.chart.destroy()
    }
  }
}
</script>

<style>
</style>
